<template>
  <div>
    <!-- 搜索 -->
    <div class="findstudents" size="small">
      <template>
        <el-select v-model="finder" size="small" style="width:90px">
          <el-option v-for="item in find" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-input placeholder="请输入内容" v-model="input" clearable size="small" style="width:300px"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="findlist" size="small">搜索</el-button>
      </template>
    </div>
    <!-- 渲染 -->
    <el-table :data="result" border style="width: 100%" max-height="480">
      <el-table-column align="center" :label="tablehead">
        <el-table-column align="center" prop="_id" label="编号" width="300"></el-table-column>
        <el-table-column align="center" prop="name" label="姓名" width="150"></el-table-column>
        <el-table-column align="center" prop="age" label="年龄" width="150"></el-table-column>
        <el-table-column align="center" prop="gender" label="性别" width="150"></el-table-column>
        <el-table-column align="center" prop="position" label="职位" width="150"></el-table-column>
        <el-table-column align="center" prop="phoneNumber" label="电话" width="150"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleEdit(scope.$index, scope.row)">不通过</el-button>
            <el-button size="mini" type="primary" @click="handleDelete(scope.$index, scope.row)">通过</el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {
  mapState,
  mapActions,
  mapGetters,
  mapMutations
} = createNamespacedHelpers("apply");
export default {
  props: ["names"],
  data() {
    return {
      _id: "",
      update: [],
      name: "",
      age: "",
      gender: "男",
      phoneNumber: "",
      input: "",
      finder: "name",
      tablehead: "",
      find: [
        { value: "name", label: "姓名" },
        { value: "age", label: "年龄" },
        { value: "gender", label: "性别" },
        { value: "phoneNumber", label: "电话" }
      ]
    };
  },
  mounted() {
    this.getuser(this.names);
    if(this.names=="1"){
      this.tablehead="用户申请"
    }else if(this.names=="2"){
      this.tablehead="管理员申请"
    }else if(this.names=="3"){
      this.tablehead="门店申请"
    }
  },
  computed: {
    ...mapState(["list", "findlist1"]),
    ...mapGetters(["finding"]),
    // 判断是否搜索到数据
    result: function() {
      if (this.finding.length > 0) {
        return this.finding;
      } else {
        return this.list;
      }
    }
  },
  methods: {
    ...mapActions(["verify", "getuser", "getuser1"]),
    ...mapMutations(["finders"]),
    
    //通过
    handleDelete(index, row) {
      const { _id, status } = row;
      this.verify({ _id, status: "申请通过", state: this.names });
      this.getuser(this.names);
    },
    //不通过
    handleEdit(index, row) {
      const { _id, status } = row;
      this.verify({ _id, status: "申请不通过", state: this.names });
      this.getuser(this.names);
    },
    //查询
    findlist: function() {
      let type = this.finder;
      let value = this.input;
      //   调用mutations方法，讲查询条件存入厂库，用于查询使用
      this.finders({ type, value });
      // 调用getter方法
      this.finding();
    }
  }
};
</script>

<style  scoped>
